<template>
	<view class="container">
		<fu-navbar title="维保记录" bgColor="#0f68f0" color="#fff"></fu-navbar>
		<view class="fixTop">
			<view class="tab-box">
				<view class="tab" :class="{'tab-active': current == 11}" @click="tabChange(11)">已完工</view>
				<view class="tab" :class="{'tab-active': current == 1}" @click="tabChange(1)">已作废</view>
			</view>
			<view class="select-box border-b-c9">
				<view class="item" @click="navTo('/pages/service/select-device/index?type=weibao')">
					<text style="color: #959595;" v-if="emName">{{emName}}</text>
					<text style="color: #959595;" v-else>选择设备</text>
					<image src="../../../static/images/arrow-b-1.png" class="arrow-b" mode="widthFix" v-if="!emName"></image>
					<image src="../../../static/images/close.png" class="close" v-else @click.stop="clear"></image>
				</view>
				<!-- <view class="item" @click="navTo('/pages/service/select-per/index')">
					<text style="color: #959595;">选择维保人</text>
					<image src="../../../static/images/arrow-b-1.png" class="arrow-b" mode="widthFix"></image>
				</view>
				<view class="item" @click="toggleTab('selector')">
					<text style="color: #959595;">{{day}}</text>
					<image src="../../../static/images/arrow-b-1.png" class="arrow-b" mode="widthFix"></image>
				</view> -->
			</view>
		</view>
		<view style="margin-top: 200rpx;"></view>
		<view class="padding-24 fs-28">共计{{total}}条记录</view>
		<view class="list">
			<view class="item margin-b-24" @click="navTo(`/pages/maintenance/main-detail/index?upkeepId=${item.upkeepId}&upkeepState=${item.upkeepState}`)" v-for="(item, index) in list" :key="index">
				<view class="info">工单名称：{{item.workOrderCode}}</view>
				<view class="info">维保设备：{{item.emName}}</view>
				<view class="info">设备地点：离心式空压机</view>
				<view style="width: 100%;height: 1rpx; background-color: #b3b3b3;margin-top: 12rpx;"></view>
				<view class="flex align-center justify-between padding-tb-24">
					<text>{{item.employeeName}}</text>
					<text>{{item.createTime}}</text>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" v-if="list.length > 5"></uni-load-more>
		
		<!-- 空数据显示 -->
		<fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>
		
		<!-- 选择天数 -->
		<w-picker mode="selector" :options="days" themeColor="#30a3e0" @confirm="onConfirm($event, 'selector')" ref="selector"></w-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 11,
			days: [
				{label: '7天'},
				{label: '14天'},
				{label: '30天'}
			],
			day: '7天',
			isInit: false,
			page: 1,
			status: 'more',
			list: [],
			total: 0,
			emName: ''
		}
	},
	onLoad() {
		this.getList();
		uni.$on('getDevice', data => {
			this.emName = data.emName
			this.status = 'more';
			this.page = 1;
			this.getList();
		})
	},
	onPullDownRefresh() {
		this.status = 'more';
		this.page = 1;
		this.getList();
	},
	onReachBottom() {
		if (this.status == 'more') {
			this.getList();
		}
	},
	onUnload() {
		uni.$off('getDevice')
	},
	methods: {
		tabChange(e) {
			this.current = e
			this.status = 'more';
			this.page = 1;
			this.getList();
		},
		navTo(path) {
			uni.navigateTo({
				url:path
			})
		},
		clear() {
			this.emName = ''
			this.status = 'more';
			this.page = 1;
			this.getList();
		},
		toggleTab(ref) {
		  this.$refs[ref].show();
		},
		onConfirm(e) {
			console.log(e)
			this.day = e.result
		},
		getList() {
			if (this.status != 'more') return;
			this.status = 'loading';
			this.$api.post(global.apiUrls.getPendingUpkeepAll, {
				pageNum: this.page,
				pageSize: 10,
				upkeepState: this.current,
				emName: this.emName
			}).then(res => {
				if (res.data.code == 9100) {
					let total = res.data.info.total
					this.total = total
					let data = res.data.info.rows
					if (this.page == 1) this.list = [];
					this.list = this.list.concat(data)
					if (this.list.length < total) {
						this.status = 'more';
						this.page++;
					} else {
						this.status = 'noMore';
					}
				}
				this.isInit = true;
				uni.stopPullDownRefresh();
			}).catch(() => {
				uni.stopPullDownRefresh();
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f3f5f8;
}
.fixTop{
	position: fixed;
	width: 100%;
	top: 150rpx;
	z-index: 99;
	background-color: #fff;
}
.tab-box {
	background-color: #fff;
	display: flex;
	align-items: center;
	height: 100rpx;
	position: sticky;
	z-index: 99;
	.tab {
		flex: 1;
		text-align: center;
		line-height: 100rpx;
		color: #7f7f7f;
		position: relative;
	}
	.tab-active {
		color: #333;
		&::after {
			content: '';
			position: absolute;
			width: 90rpx;
			height: 6rpx;
			background-color: #555;
			border-radius: 2rpx;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
	}
}
.select-box {
	background-color: #fff;
	padding: 24rpx 32rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.item {
		width: 29%;
		background-color: #d7d7d7;
		height: 52rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 16rpx;
		justify-content: space-between;
		font-size: 28rpx;
		border-radius: 18rpx;
		.arrow-b {
			width: 26rpx;
		}
		.close {
			width: 32rpx;
			height: 32rpx;
		}
	}
}
.list {
	.item {
		background-color: #fff;
		padding: 24rpx 32rpx 0;
		border-radius: 20rpx;
		font-size: 28rpx;
		.info {
			line-height: 1.8;
		}
	}
}
</style>